@import "../config/var";
@import "../config/utils";

.poster_img {
	width: 100%;
	vertical-align: middle;
}
.meeting_poster_box {
	position: relative;
	//background-image: url(../../img/poster/poster-back.png);
	background-image: url(../../img/poster/poster-back-repeat.png);
	//background-repeat: no-repeat;
	background-size: 100%;
	//background-attachment: fixed;
	.poster_header_banner {
		max-width: 100%;
		vertical-align: middle;
	}
}
.meeting_poster {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 9px 0;
	min-height: 100vh;
  &_footer {
    margin: 0 -9px;
    .poster_footer {
      max-width: 100%;
      vertical-align: middle;
    }
  }
  &_title {
    text-align: center;
    margin-top: -60px;
    color: @color-primary;
    .title {
      margin: 0;
      font-size: 18px;
      font-weight: bold;
      text-shadow: 0 0 4px #fff;
      & + .title { margin-top: 5px; }
    }
  }
	&_body {
		box-sizing: border-box;
		margin-top: -10px;
		padding: 0 22px;
		.body_title {
			position: relative;
			margin: 24px 0;
			&__inner {
				width: 100%;
			}
			&__text {
				width: 100%;
				height: 18px;
				text-align: center;
				font-family: AlibabaPuHuiTiB;
				font-size: 14px;
				line-height: 18px;
				font-weight: bold;
				background-image: url("@/img/poster/title-back.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
		}
		.body_main {
      &_qrcode {
				.qrcode__img {
					display: inline-block;
          margin-top: 20px;
					&>img {
            width: 150px;
            height: 150px;
            border-radius: 6px;
						vertical-align: middle;
					}
				}
				.qrcode__text {
					color: #fff;
					font-size: 12px;
				}
			}
      &_col {
        margin-top: 20px;
        &:nth-child(1),
        &:nth-child(2) { margin-top: 0; }
      }
			&_avatar {
				&.pt {
					padding-top: 20px;
				}
				text-align: center;
				.avatar__back {
					display: inline-block;
					width: 80px;
					height: 80px;
					background-image: url("@/img/poster/avatar-back.png");
					background-size: contain;
					background-position: center center;
					background-repeat: no-repeat;
					border-radius: 50%;
					padding: 1px;
					&__inner {
						width: 70px;
						height: 70px;
						vertical-align: middle;
						border-radius: 50%;
						margin-top: 5px;
					}
				}
				.avatar__text {
					font-weight: bold;
					color: @color-primary;
					margin-top: 10px;
					// padding: 0 10px;
          // 当行展示
          // white-space: nowrap;
					&__inner {
						margin: 0;
						font-size: 12px;
						font-family: AlibabaPuHuiTiB;
            color: @color-primary;
						line-height: 20px;
						&:nth-child(1) { font-weight: bold; }
						&:nth-child(2) { font-weight: 400; }
					}
				}
			}
			&_list {
				box-sizing: border-box;
				width: 100%;
        color: @color-primary;
				font-weight: bold;
				position: relative;
				>div {
					>div {
						display: flex;
						align-items: center;
						> div {
							padding-top: 6px;
							padding-bottom: 6px;
							font-size: 9px;
							// font-size: 12px;
							line-height: 14px;
							&:nth-child(1){ width: 30%; }
							// &:nth-child(2){ width: 40%; padding-right:14px; }
							// &:nth-child(3){ width: 30%; }
              // 当行展示
              &:nth-child(2){ width: 45%; padding-right:14px; }
							&:nth-child(3){ width: 25%; }
							p { margin: 0; }
						}
            &.list_body_title {
              padding: 10px 0;
              font-size: 24px;
              > div {
                width: 100%;
                text-align: center;
                justify-content: center;
                padding-left: 10px;
                font-size: 13px;
                line-height: 20px;
              }
            }
					}
					&.list_header {
						background-image: url("@/img/poster/table-header-back.png");
						background-size: 100% 100%;
						background-repeat: no-repeat;
						div {
							color: @color-primary;
							>div:first-child { padding-left: 14px; }
						}
					}
					&.list_body {
						>div {
							position: relative;
							&:nth-child(even) {
								border-radius: 0 12px 12px 0;
								overflow: hidden;
								background-image: linear-gradient(to right, transparent, rgb(255, 255, 255));
							}
							>div:first-child {
								display: flex;
								align-items: center;
								.time_step_icon {
									width: 8px;
									height: 8px;
									margin-top: -2px;
									margin-right: 5px;
									vertical-align: text-top;
								}
								&:before {
									content: '';
									position: absolute;
									left: 3px;
									width: 1px;
									height: 100%;
									background-color: #fff;
								}
							}
							&:first-child {
								>div:first-child {
									&:before {
										height: 50%;
										bottom: 0;
									}
								}
							}
							&:last-child {
								>div:first-child {
									&:before {
										height: 50%;
										top: 0;
									}
								}
							}
						}
					}
				}
			}
      &_table {
        .table {
          width: 100%;
          border-collapse: collapse;
          td, th {
            padding: 6px;
            font-size: 9px;
            line-height: 14px;
            color: @color-primary;
            font-weight: bold;
          }
          td {
            border-bottom: 1px solid #fff;
            p { margin: 0; }
          }
          th:nth-child(1) { width: 23%; text-align: left;}
          th:nth-child(2) { width: 37%; }
          th:nth-child(3) { width: 20%; }
          th:nth-child(4) { width: 20%; }
        
          .table_thead {
            background-image: url("@/img/poster/table-header-back.png");
						background-size: 100% 100%;
						background-repeat: no-repeat;
          }

        }
      }
		}
	}
}
